<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="'top' + index" class="scroll-item" v-for="(item, index) in topBar" :key="index" @click="changeTab(index)">
				<text :class="topBarIndex===index? 'f-active-color': 'f-color'">{{item.name}}</text>
			</view>
		</scroll-view>
		
		 <!--  -->
		<swiper @change="onChangeTab" :current="topBarIndex" :style=" 'height:' + clientHeight + 'px' ">
			<swiper-item v-for="(item, index) in topBar" :key="index">
				<view class="home-data">
					<IndexSwiper></IndexSwiper>
					<Recommend></Recommend>
					<Card cardTitle="猜你喜欢"></Card>
					<CommodityList></CommodityList>
				</view>
			</swiper-item>
		</swiper>
		<!-- 轮播 -->
		<!-- <IndexSwiper></IndexSwiper> -->
		<!-- 推荐 -->
<!-- 		<Recommend></Recommend> -->
		<!-- 其它版块 -->
<!-- 		<Card cardTitle="猜你喜欢"></Card>
		<CommodityList></CommodityList> -->
		<!-- 运动户外 -->
<!-- 		<Banner></Banner>
		<Icons></Icons>
		<Card cardTitle="热销爆款"></Card>
		<Hot></Hot>
		<Card cardTitle="店铺推荐"></Card>
		<Shop></Shop> -->
		
	</view>
</template>

<script>
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	
	export default {
		data() {
			return {
				// 选中的索引
				topBarIndex: 0,
				scrollIntoIndex: "top0",
				clientHeight: 0,
				topBar: Array
			}
		},
		components: {
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop
		},
		onLoad() {
			this.__init()
		},
		onReady() {
			let view = uni.createSelectorQuery().select(".home-data");
			view.boundingClientRect(data =>{
				this.clientHeight = 1000;
			}).exec(); 
			
		},
		methods: {
			
			__init(){
				uni.request({
					url:"http://app.yanyuqi.vip:8000/api/index",
					success: (res) => {
						let data = res.data;
						this.topBar = data.topbar
					}
				})
			},
			changeTab(index){
				if (this.topBarIndex === index){
					return
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = "top" + index;
			},
			onChangeTab(e){
				this.changeTab(e.detail.current)
			}
		}
	}
</script>

<style scoped>
.scroll-content{
	width: 100%;
	height: 80rpx;
	/* 不换行 */
	white-space: nowrap;  
}
.scroll-item{
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 32rpx;
}
.f-active-color{
	padding: 1rpx 0;
	border-bottom: 6rpx solid #49BDFB;
}
</style>
